<!--首页-->
<template>
  <div class="Home">
    <div class="Homeheader">
      <img src="../../static/img/logo.png" alt="">
    </div>
    <div class="official">
      <ul>
        <li>
          <img src="../../static/img/bz.png" alt="">
          <p>全国联保</p>
        </li>
        <li>
          <img src="../../static/img/money.png" alt="">
          <p>退货保障</p>
        </li>
        <li>
          <img src="../../static/img/hh.png" alt="">
          <p>换货保障</p>
        </li>
        <li>
          <img src="../../static/img/by.png" alt="">
          <p>全场包邮</p>
        </li>
        <li>
          <img src="../../static/img/wd.png" alt="">
          <p>售后网点</p>
        </li>
        <li>
          <img src="../../static/img/zp.png" alt="">
          <p>正品保障</p>
        </li>
      </ul>
    </div>
    <div class="swipe">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <router-link to="goodDetail?id=3"><img
            src="../../static/img/banner1.png"
            alt="轮播图"></router-link>
        </mt-swipe-item>
        <mt-swipe-item>
          <router-link to="goodDetail?id=1"><img
            src="../../static/img/banner2.png"
            alt="轮播图"></router-link>
        </mt-swipe-item>
        <mt-swipe-item>
          <router-link to="goodDetail?id=6"><img
            src="../../static/img/banner3.png"
            alt="轮播图"></router-link>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="HomeList">
      <ul>
        <li @click="xuangou">
          <img src="/static/img/phone.png" alt="选购">
          <p>选购手机</p>
        </li>
        <li @click="parts">
          <img src="/static/img/pj.png" alt="配件">
          <p>选购配件</p>
        </li>
        <li @click="$router.push('/scree')">
          <img src="/static/img/sp.png" alt="屏保">
          <p>oppo潮牌</p>
        </li>
        <li @click="$router.push('/made')">
          <img src="/static/img/dz.png" alt="定制">
          <p>oppo代言</p>
        </li>
      </ul>
    </div>
    <div class="main">
      <div class="hot_title">
        <img src="../../static/img/hot.png" alt="">
        <span>爆款产品</span>
      </div>
      <div class="main_box">
        <ul>
          <li v-for="(todo,index) in todos" :id="todo.id" @click="open(todo.id)" class="list">
            <div class="image">
              <img v-lazy="todo.img" alt="图片">
            </div>
            <div class="name">{{todo.name}}</div>
            <div class="nametwo">{{todo.nametwo}}</div>
            <div class="Price">￥{{todo.Price}}</div>
          </li>
        </ul>
      </div>
    </div>
    <v-footer></v-footer>
  </div>

</template>

<script>
  import {mapState, mapMutations, mapGetters} from 'vuex';
  import {Swipe, SwipeItem} from 'mint-ui';
  import {MessageBox} from 'mint-ui';
  import footer from './footer.vue'

  export default {
    name: "Home",
    data() {
      return {
        todos: []
      }
    },
    components:{
      "v-footer":footer
    },
    mounted: function () {
      this.getData();
    },
    methods: {
      getData() {
        var _this = this;
        this.$http.get('/static/Home.json').then(res => {
          for (var i = 0, len = res.body.todos.length; i < len; i++) {
            var selData = res.body.todos[i];
            _this.todos.push(selData);
          }
        })
      },
      open(id) {
        this.$router.push({path: "goodDetail", query: {id: id}})
      },
      xuangou() {
        this.$router.push({path: "choose"})
      },
      parts() {
        this.$router.push({path: "parts"})
      },
      btn() {
        MessageBox('提示', '暂未开通');
      }
    },
  }
</script>

<style scoped>
  *{
    padding: 0;
  }
  .Home {
    border-bottom: 10px;
  }

  .Homeheader img {
    width: 20%;
    margin-top: 10px;
  }

  .Homeheader {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    background: #3aab35;
    border-bottom: 1px solid #d7d7d7;
  }

  .swipe {
    height: 6.5rem;
    margin-top: 1px;
  }

  .swipe img {
    width: 100%;
    height: 6.5rem;
  }

  .hot_title {
    width: 100%;
    height: 50px;
  }

  .hot_title img {
    float: left;
    width: 25px;
    display: inline;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 5px;
  }

  .hot_title span {
    color: #fd3f1d;
  }

  .main_box {
    /* margin-bottom: 34px;  */
    height: 339px;

  }

  .main span {
    display: block;
    height: 1.3rem;
    background: white;
    font-size: 0.35rem;
    line-height: 1.3rem;
    padding-left: 0.3rem;
  }

  .list {
    height: 7.3rem;
    background: white;
    float: left;
    box-sizing: border-box;
    width: 50%;
    border-right: 1px solid #F4F4F4;
    border-top: 1px solid #cccccc;
  }

  .list span {
    display: block;
    color: red;
    padding-left: 0.5rem;
    padding-top: 0.1rem;
  }

  .main_box ul {
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  ul li {
    list-style: none;
  }

  .name {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: auto;
    font-size: 0.37rem;
    padding-top: 0.8rem;
    font-weight: 800;
    text-align: center;
  }

  .nametwo {
    font-size: 0.01rem;
    text-align: center;
    padding-top: 0.15rem;
    font-family: "微软雅黑"
  }

  .Price {
    font-size: 0.33rem;
    color: red;
    margin: auto;
    /* padding: 0.1rem 0.9rem; */
    text-align: center;
    padding-top: 0.48rem;
    /* font-weight: bold; */
    font-size: 0.38rem;

  }

  .image {
    width: 100%;
    height: 4rem;
    background: white;
  }

  .image img {
    height: 3.3rem;
    width: 3.5rem;
    display: block;
    margin: auto;
    padding-top: 0.9rem;
  }

  .HomeList {
    width: 100%;
    height: 2.5rem;
    background: white;
    border-bottom: 1px solid #cccccc;
  }

  .HomeList > ul > li {
    width: 24%;
    text-align: center;
    background: #f2f2f2;
    border-radius: 5px;
    float: left;
    margin-left: 3px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .HomeList > ul > li img {
  }

  .HomeList > ul > li p {
    color: #41a843;
  }

  .official {
    width: 100%;
    height: 50px;
    background: white;
    margin-top: 50px;
    align-items: center;
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 5px;
  }

  .official > ul > li {
    float: left;
    width: 16%;
    text-align: center;
    margin-left: 1px;
    padding-top: 5px;
    border-right: 1px solid #d7d7d7;
  }

  .official > ul > li:last-child {
    border-right: none;
  }

  .official > ul > li > p {
    color: #888;
  }

  .official > ul > li > img {
    width: 40%;
  }
</style>

